<template>
	<view>
		<view class="checkTime">
			<uni-datetime-picker v-model="range" type="daterange" @change="maskClick" />
		</view>
		<view class="ul" v-for="(item,index) in list" :key="index" @click="toProfitDe(item.title)">
			<view class="li">
				<!-- <view class="liTime">
					<view class="txt1">
						{{item.title}}
					</view>
					<view class="txt">
						￥{{(item.price/100).toFixed(2)}}
					</view>
				</view>
				<view class="liPrice">
					{{parseTime(item.createTime)}}
				</view> -->
				<view class="listext">
					{{item.title}},获得佣金￥{{(item.price/100).toFixed(2)}}
				</view>
				<view class="timeDay">
					{{calculateDaysAgo(item.createTime)}}
				</view>
			</view>
		</view>
		<view class="other">
			<view class="helde">

			</view>
			<view class="otherTxt">
				{{txt}}
			</view>
			<view class="helde">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/ruoyi"
	import {
		brokerageRecord
	} from "@/api/profit/profit.js"
	export default {
		data() {
			return {
				txt: '下滑加载',
				list: [], //订单数据
				pageNum: 1, //页码
				listnum: 0, //列表长度
				range: [],
			}
		},
		onLoad() {
			this.getList()
		},
		//触底加载
		onReachBottom() {
			let that = this
			if (that.list.length == that.listnum) {
				uni.showToast({
					title: '没有更多了',
					icon: "none"
				})
				that.txt = '没有更多了'
			} else {
				that.pageNum = that.pageNum + 1
				that.getList()
			}
		},
		methods: {
			// 处理时间
			calculateDaysAgo(timestamp) {
				// 将输入的时间戳转换为Date对象
				const inputDate = new Date(timestamp);
				// 获取当前时间的Date对象
				const currentDate = new Date();
				// 计算时间差（单位为毫秒）
				const timeDifference = currentDate - inputDate;
				// 将时间差转换为天数（1天 = 24 * 60 * 60 * 1000毫秒）
				const daysAgo = Math.floor(timeDifference / (24 * 60 * 60 * 1000));

				// 如果天数小于0，说明输入的时间戳在未来，返回提示信息
				if (daysAgo < 0) {
					return " ";
				}
				// 返回结果
				return `${daysAgo}天前`;
			},
			//打开详情
			toProfitDe(e) {
				uni.showModal({
					title: '记录详情',
					content: e,
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
				this.range = []
				this.list = []
				this.listnum = 0
				this.pageNum = 1
				if (e.length) {
					this.range.push(e[0] + ' 00:00:00')
					this.range.push(e[1] + ' 23:59:59')
				}
				this.getList()
			},
			// const timeFormat = uni.$u.timeFormat;
			// let timeValue = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
			getList() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let data = {
					pageNo: that.pageNum,
					pageSize: 13,
					createTime: that.range
				}
				// console.log(data)
				brokerageRecord(data).then(response => {
					uni.hideLoading()
					if (response.data.total < 10) {
						that.txt = '没有更多了'
					}
					that.listnum = response.data.total
					if (that.list.length < response.data.total) {
						// that.list = that.list.concat(res.data.rows)
						that.list = that.list.concat(response.data.list)
					}
				})
			},
			//时间处理
			parseTime(time) {
				return parseTime(time)
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.checkTime {
		width: 690rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		margin: 30rpx auto;
		background: #F5F5F5;
		border-radius: 34rpx;
		font-size: 28rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.chekImg {
		width: 24rpx;
		height: 22rpx;
		display: block;
		margin-left: 10rpx;
	}

	.ul {
		width: 690rpx;
		min-height: 102rpx;
		border-bottom: 2rpx solid #F5F5F5;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.li {
		width: 630rpx;
		height: fit-content;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.liTime {
		width: 350rpx;
		height: 102rpx;
		line-height: 102rpx;
		font-size: 28rpx;
		color: #333333;
		display: flex;
	}

	.liImg {
		width: 15rpx;
		height: 24rpx;
		display: block;
		margin-left: 10rpx;
		transform: rotate(90deg);
	}

	.liPrice {
		width: 250rpx;
		height: 102rpx;
		line-height: 102rpx;
		text-align: end;
		font-size: 24rpx;
		color: #999999;
	}

	.other {
		width: 750rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #999999;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.otherTxt {
		width: 150rpx;
		height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		color: #999999;
	}

	.helde {
		width: 50rpx;
		height: 2rpx;
		background-color: #DCDCDC;
	}

	.txt1 {
		width: 250rpx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		/*省略号*/
		margin-right: 10rpx;
	}

	/* 修改样式 */
	.listext {
		width: 550rpx;
		height: fit-content;
		font-size: 23rpx;
	}
	.timeDay{
		font-size: 23rpx;
		color: #7d7d7d;
	}
</style>